<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>if else</title>
</head>
<body>
<div id="app">

    <h1 v-if="isShow">
        我是h1
    </h1>
    <h2 v-else>
        我是h2
    </h2>

    <p>
        成绩：
    <h3 v-if="score>=90">优秀</h3>
    <h3 v-else-if="score>=60">及格</h3>
    <h3 v-else-if="score<60">不及格</h3>

    </p>

    <div>登录
        <section v-if="switchstatus">
            手机登录<input type="text" placeholder="手机登录" key="username">
        </section>
        <section v-else>
            邮箱登录<input type="text" placeholder="邮箱登录" key="email">
        </section>
        <button @click="switchLog">切换登录方式</button>
    </div>


    我喜欢的电影有：
    <ul>
        <li v-for="(item,index) in movies" :key="item">{{index+1 + item}}</li>
    </ul>

    我的信息
    <ul>
        <li v-for="(item , key , index) in userinfo">
            {{index + key + item}}
        </li>
    </ul>

</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      isShow: false,
      score: 50,
      switchstatus: true,
      movies: ['电影1', '电影2', '电影3'],
      userinfo:{
        name:'小明',
        age:18,
        height:1.88
      }
    },
    methods: {
      switchLog() {
        this.switchstatus = !this.switchstatus;
      }
    }
  })
</script>

</body>
</html>